import {Component,
  OnInit,
  ViewChild,
  ElementRef,
  ContentChild,
  Directive
} from '@angular/core';
import { SimpleTableComponent } from "../../../../../shared/components/simple-table/simple-table.component";
import response from '../../../../../assets/mockdata/jsonFile/response.json'
import {TheadItem} from "../../../../../shared/components/simple-table/simple-table.component";

let obj = response.responseObject.data[0]
type rowItem = typeof obj

interface Person {
  key: string;
  name: string;
  age: number;
  address: string;
}


@Component({
  selector: 'app-python',
  template: `
    <app-spin [spinning]="loading"></app-spin>

    <button
            (click)="loading = !loading">click
    </button>

    <button  (click)="isShowAll = !isShowAll">
      showAll
    </button>

    <!--      [thead]="theads"-->
    <app-simple-table
      #basicTable
      [dataSource]="dataSource"
      [showAll]="isShowAll"
      [pageIndex]="pi"
      [pageSize]="5"
    >
      <thead>
        <tr>
          <ng-container *ngFor="let th of this.theads">
<!--            (sortChange)="basicTable.dataSource = th?.sortFn.call(basicTable, th, $event)"-->
            <th
              *ngIf="!th.hidden"
              [tbSort]="th.sort"
              [tbFilter]="true"
              [tbColumnKey]="th.prop"
              [fixedLeft]="th.fixedLeft"
              [fixedRight]="th.fixedRight"
              [style.width]="th.width || '100px'"
              [style.min-width]="th.min_width || '100px'"
            >{{th.text}}
            </th>
          </ng-container>
        </tr>
      </thead>
      <tbody>
      <ng-container *ngFor="let row of basicTable.data; let index = index">
        <tr >
          <td rowspan="3" class="control-area" fixedLeft>
          </td>
          <td rowspan="3" class="material-area" fixedLeft >
            <div style="display: flex; width: 100%; height: 100%;flex-direction: column">
              <span>{{row.item}}</span>
              <span style="color: #ccc" >{{row.item_desc}}</span>
            </div>
          </td>
          <td style="color: #6f82a1" fixedLeft >Demand</td> <td
            *ngFor="let value of row.demand" [style.color]="value<0 ?'red' : ''">{{value | avNumberString}}</td>
          <td fixedRight></td>
        </tr>
        <tr >
          <td style="color: #6f82a1" fixedLeft >Supply</td>
          <td *ngFor="let value of row.supply" [style.color]="value<0 ?'red' : ''">{{value | avNumberString}}</td>
          <td fixedRight></td>
        </tr>
        <tr>
          <td style="color: #6f82a1" fixedLeft >Balance</td>
          <td *ngFor="let value of row.balance" [style.color]="value<0 ?'red' : ''">{{value | avNumberString}}</td>
          <td fixedRight></td>
        </tr>
      </ng-container>
      </tbody>
    </app-simple-table>
  `,
  styles: [
    `
      ::ng-deep .ml-table-body > tr > td.control-area {
        border-right: 1px solid #ceebfb;
        border-bottom: 1px solid #ceebfb !important;
      }
      ::ng-deep .ml-table-body > tr > td.material-area {
        border-bottom: 1px solid #ceebfb !important;
      }
    `
  ]
})
export class PythonComponent implements OnInit {
  @ViewChild(SimpleTableComponent, {static: true})
  st!: SimpleTableComponent<{ name: string, age: number, address: string, favorite: string }>
  pi = 1
  ps = 10
  dataSource: rowItem[] = []
  dataSourceX: Array<{ name: string, age: number, address: string, favorite: string }>  = Array(13).fill({
    name: 'wangml',
    age: 25,
    address: 'wuhan',
    favorite: '喜欢发哈的肌肤'
  })
  isShowAll = false
  cbFn = {
    filterShowAll(listOfData: any[], head: any) {
      return listOfData.reduce((arr, row) => {
        let rowObj = {...row}
        let a = ['supply', 'demand', 'balance']
        a.forEach(attr => {
          rowObj[attr] = row[attr].slice(0, 5)
        })
        arr.push(rowObj)
        return arr
      }, [])
    }
  }

  constructor() { }
  loading = true
  // 表头
  unChangeThead = ['', 'Material', 'Type']
  theads!: any[]

  private static handleDate(bucket: string[]) {
    return bucket.map(date => date.slice(5, 10))
  }
  ngOnInit(): void {
    // console.log(this.st)
    // @ts-ignore
    let  { bucket } = response.responseObject
    const showItems = PythonComponent.handleDate(bucket)
    let ths: TheadItem[] = [
      { text: '', hidden: false, prop: 'noneKey', min_width: '20px', width: '20px',fixedLeft: true, sort: false },
      { text: 'Material', hidden: false, prop: 'item', min_width: '160px', width: '160px', fixedLeft: true, sort: false },
      { text: 'Type', hidden: false, prop: 'sType', width: '80px', min_width: '80px', fixedLeft: true, sort: false },
    ]
    ths = ths.concat(showItems.reduce((arr: TheadItem[], cur) => {
      arr.push({
        text: cur,
        // hidden: !showItems.slice(0, 5).includes(cur),
        hidden: false,
        prop: cur,
        sort: true
      })
      return arr
    }, []))
    ths.push({
      text: 'Action',
      hidden: false,
      prop: '',
      fixedRight: true
    })
    this.theads = ths
    // let a = this.genDataSource(response.responseObject.data, PythonComponent.handleDate(bucket))
    this.dataSource = response.responseObject.data
  }

  // genDataSource(source: any[], bucket: string[]) {
  //   return source.reduce((arr, row, idx,s) => {
  //     // @ts-ignore
  //     let a = ['demand', 'supply', 'balance']
  //     let tempObj = { material: row['item'] }
  //     a.forEach(item => {
  //       let obj = {...row}
  //       delete obj.supply
  //       delete obj.demand
  //       delete obj.balance
  //       bucket.forEach((date, index) => {
  //         // @ts-ignore
  //         obj[date] = row[item][index]
  //       })
  //       tempObj[item] = obj
  //     })
  //     // @ts-ignore
  //     arr.push(tempObj)
  //     return arr
  //   }, [])
  // }

}
